<template>
  <div class="form-designer">
    <VFormDesigner ref="vfdRef" :withHeader="false" />
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, defineProps, PropType } from 'vue'
import { DesignerMixinData, useDesignerMixin } from '@/components/Designer/mixins/DesignerMixin'
import { useApprovalDesignerStore } from '@/store/modules/dsgn/ApprovalDesigner'
import { DsgnFormService } from '@/api/res/approval/DsgnFormService'

const vfdRef = ref()
defineOptions({ name: 'FormDesignerV3' })

const designerStore = useApprovalDesignerStore()
// 实现 DsgnFormService 接口
const dsgnFormService: DsgnFormService = {
  getFormData: () => {
    const formData = vfdRef.value.getFormJson()
    return formData
  },
  getFormConfig: () => {
    const formData = vfdRef.value.getFormJson()
    return formData
  }
}

const configJson = ref(designerStore.designerModel.form.configJson)

onMounted(() => {
  vfdRef.value.clearDesigner()
  vfdRef.value.setFormJson(configJson.value)
})

defineExpose({ dsgnFormService })
</script>
<style lang="scss">
.form-designer {
  .form-widget-container {
    .el-form.full-height-width {
      > .form-widget-list {
        min-height: calc(100vh - 200px) !important;

        .form-widget-list {
          //min-height: auto; // 或者你可以设置一个默认值
        }
      }
    }
  }

  .side-scroll-bar,
  .el-scrollbar__view,
  .el-scrollbar {
    height: calc(100vh - 160px) !important;
  }
}
</style>
